<template>
  <div>
    <el-form
      :inline="inline"
      :model="formModel"
      :size="size || 'small'"
      :clearable="clearable"
    >
      <el-form-item
        v-for="(item, index) in formList"
        :key="index"
        :label="item.label || ''"
      >
        <el-input
          v-if="item.type == 'input'"
          v-model="formModel[item.model]"
          :type="item.inputType || 'text'"
          :placeholder="item.placeholder || '请输入'"
          :clearable="item.clearable || false"
          :maxlength="item.maxlength || 10"
          :minlength="item.minlength || 4"
          :show-word-limit="item.showWordLimit"
          :show-password="item.showPassword"
          :disabled="item.disabled"
          :size="btn_size"
          :prefix-icon="item.prefixIcon"
          :suffix-icon="item.suffixIcon"
          :rows="item.rows"
          :autosize="item.autosize"
          :readonly="item.readonly"
          @change="item.change || defaultChange"
        ></el-input>
        <el-select
          v-if="item.type == 'select'"
          v-model="formModel[item.model]"
          :placeholder="item.placeholder || '请选择'"
          :clearable="item.clearable"
          :filterable="item.filterable"
          :filter-method="item.filterMethod"
          :disabled="item.disabled"
          :multiple="item.multiple"
          :allow-create="item.allowCreate"
          :remote="item.remote"
          :remote-method="item.remoteMethod"
          :loading="item.loading"
          :loading-text="item.loadingText"
          @change="item.change || defaultChange"
          @remove-tag="item.removeTag || defaultRemoveTag"
        >
          <el-option
            v-for="i in item.options"
            :key="i[item.value] || i.value"
            :label="i[item.key] || i.label"
            :value="i[item.value] || i.value"
            :disabled="i.disabled"
          >
          </el-option>
        </el-select>
        <el-date-picker
          v-if="item.type == 'datePicker'"
          v-model="formModel[item.model]"
          :type="item.dateType || 'date'"
          :placeholder="item.placeholder || '选择日期'"
          :readonly="item.readonly"
          :disabled="item.disabled"
          :editable="item.editable || false"
          :clearable="item.clearable"
          :size="btn_size"
          :start-placeholder="item.startPlaceholder || ''"
          :end-placeholder="item.endPlaceholder || ''"
          :format="item.format"
          :value-format="item.valueFormat"
          :align="item.align"
          :picker-options="item.pickerOptions"
          :range-separator="item.rangeSeparator"
          :default-value="item.defaultValue"
          @change="item.change || defaultChange"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <template
          name="form-slot"
          slot-scope="scope"
        >
          <slot :scope="scope">
          </slot>
        </template>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'd2-form',
  data() {

  },
  props: {
    inline: {
      type: Boolean,
      default: true
    },
    formModel: {
      type: Object,
      default: () => { }
    },
    size: {
      type: String,
      default: 'small'
    },
    clearable: {
      type: Boolean,
      default: false
    },
    formList: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    defaultChange(e) {
      return e
    },
    defaultRemoveTag(e) {
      return e
    }
  }
}
</script>

<style lang="">
</style>